<template>
	<scroll-view class="kecheng" @scrolltolower="loadMoreData" scroll-y="true">
		<view class="kechenglist" v-for="(item,index) in list" @click="kcdetail(item)">
			<view class="kechengimg">
				<img :src="item.cover" alt="" />

			</view>
			<view class="kecinfo">
				<view class="kctitle">
					{{item.title}}
				</view>
				<view class="kcbottom">
					<view class="price" style="color: #4db5fb;">
						{{item.price}}
					</view>
					<view class="subjj">
						{{item.buyCount}}次购买
					</view>

				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		ref
	} from 'vue';

	import instance from '../../request';
	const form = ref({
		page: 1,
		limit: 10
	});
	const list = ref([]);
	const totalpage = ref();
	onMounted(() => {
		getlist()
	})
	
	const kcdetail=(item)=>{
		uni.navigateTo({
			url:`/pages/kcdetail/kcdetail?id=${item.id}`
		})
	}
	const getlist = async () => {
		const res = await instance.get(`/api/edu/course/${form.value.page}/${form.value.limit}`)
		console.log(res)
		list.value = list.value.concat(res.data.items)
		totalpage.value = res.data.pages
	}
	onReachBottom(() => {
		console.log(1123)
	})
	const loadMoreData = () => {
		console.log(1123)
		if (form.value.page < totalpage.value) {
			form.value.page++
			getlist()
		}

	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.kecheng {
		width: 100%;
		height: 100vh;
		padding: 10px;
		box-sizing: border-box;
		overflow: auto;
		background: rgba(239, 239, 239, 0.6901960784);
	}

	.kechenglist {
		width: 100%;
		height: auto;
		padding: 10px;
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 10px;
		overflow: hidden;
	}

	.kechengimg {
		width: 120px;
		height: 72px;
		float: left;

	}

	.kechengimg image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.kecinfo {
		width: calc(100% - 130px);
		height: auto;
		padding: 10px;
		box-sizing: border-box;
		float: right;
	}

	.kctitle {
		font-size: 12px;
		color: #a1a7b2;
	}

	.kcbottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.subjj {
		font-size: 12px;
	}

	.price {

		font-size: 12px;
	}
</style>